import './ReadLabel.css'
import axios from "axios";
import { useState, useEffect } from 'react'
import { Select, Input, List, Flex, Tag } from 'antd';
const { Search } = Input;

const commonUrl = 'http://www.samxfan.net/smart-admin-api/publicApi';
// const commonUrl = 'http://127.0.0.1:1024/publicApi';
let keyword = '';
let labelIds = [];

const ReadLabel = () => {
  console.log('ReadLabel.jsx');

  const [options, setOptions] = useState([]);
  const [articleList, setArticleList] = useState([]);
  const [articleTotal, setArticleTotal] = useState(0)
  
  const [count, setCount] = useState(0);
  
  useEffect(() => {
     queryLabel();
     queryData();

     console.log('3 count=', count);  // 0
    setCount(count + 1); // 请求用 1 重新渲染
    console.log('4 count=', count);  // 仍然是 0！
  }, []);
  
  const handleChange = (value) => {
    labelIds = value;
    queryData();
  };

  const onSearch = (value, _e, info) => {
    keyword = value;
    queryData();
  }
    

 // 查询标签数据
  async function queryLabel() {
    const res = await axios.get(commonUrl+'/readLabel/queryAll');
    
    let tempArray = [];

    res.data.data.forEach(item => {
        tempArray.push({
              value: item.labelId,
              label: item.labelName,
        })
    })

    setOptions(tempArray);
  }

  // 查询数据
  async function queryData(pageNum) {
    const res = await axios.post(commonUrl+'/readLabelArticle/queryPage', {
          labelIds: labelIds,
          keyword: keyword || '',
          pageNum: pageNum || 1,
          pageSize: 10,
      });

    let tempArray = res.data.data.list;

    tempArray.forEach(item => {
        item.labelList?.forEach((subItem, index) => {
          switch(index % 7){
            case 1:
              subItem._tagColor = 'cyan';
              break;
            case 2:
              subItem._tagColor = 'blue';
              break;
            case 3:
              subItem._tagColor = 'orange';
              break;
            case 4:
              subItem._tagColor = 'green';
              break;
            case 5:
              subItem._tagColor = 'pink';
              break;
            case 6:
              subItem._tagColor = 'red';
              break;
            case 0:
              subItem._tagColor = 'purple';
              break;
          }
        })
      })

    setArticleTotal(res.data.data.total);
    setArticleList(tempArray);
  }

  return (
    <div>
      <div className="version"><a href="http://www.samxfan.net/SmartAdmin/readlabel" target="_blank">Vue版</a></div>
      <div className="list">
        <Select
          mode="multiple"
          style={{ width: '39%' }}
          placeholder="请选择标签"
          allowClear
          onChange={handleChange}
          options={options}
        />
        <Search placeholder="请输入关键字" onSearch={onSearch} enterButton allowClear style={{ width: '60%', marginLeft: '1%' }} />
        <List
          itemLayout="vertical"
          size="large"
          pagination={{
            onChange: page => {
              queryData(page);
            },
            total: articleTotal,
            pageSize: 10,
          }}
          dataSource={articleList}
          renderItem={item => (
            <List.Item
              key={item.title}
            >
              <List.Item.Meta
                title={<a href={item.articleLink}>{item.articleTitle}</a>}
              />
              {item.articleBrief}
              
              <Flex gap="4px 0" wrap>
                {item.labelList.map(subItem => <Tag key={subItem.labelId} color={subItem._tagColor}>{`${subItem.labelName} `}</Tag>)}
              </Flex>
            </List.Item>
          )}
        />
      </div>
    </div>
  );
};

export default ReadLabel;
